<template>
  <div class="textarea-Container">
    <el-input type="textarea" v-model="inpValue" placeholder="请输入自定义的选项,以空格分隔" :rows="2" @change="change" />
    <el-tooltip :content="content" placement="bottom" effect="light">
      <el-icon :size="20" color="#a1a1a1">
        <Warning />
      </el-icon>
    </el-tooltip>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
const props = defineProps({
  modelValue: {
    type: Array,
    defalut: []
  }
})
const emit = defineEmits(['update:modelValue'])
const inpValue = ref('')
const content = ref('请输入自定义的选项,以空格分隔!若选项过多,可联系开发人员进行添加!')
watchEffect(() => {
  if (props.modelValue.length !== 0) {
    inpValue.value = props.modelValue.map(item => item.value).join(' ')
  }
})
const change = (val) => {

  const updateVal = val.split(' ').map(item => {
    return {
      value: item,
      label: item
    }
  }).filter(item => item.value)

  emit('update:modelValue', updateVal)
}

</script>

<style lang="scss" scoped>
.textarea-Container {
  display: flex;

  :deep(.el-icon) {
    margin-left: 20px;
  }
}
</style>